<template>
  <view class="address tn-safe-area-inset-bottom">
    <tn-navbar
      z-index="1"
      index-url="/pages/mine/address/address"
      fixed
      :bottom-shadow="false"
      >{{ navbarTitle }}</tn-navbar
    >
    <view class="content">
      <view class="content-item tn-flex-center-start">
        <view class="tn-col-3">姓名</view>
        <view class="tn-flex-1"
          ><tn-input
            class="address-input"
            v-model="formParams.name"
            placeholder="请输入姓名"
          ></tn-input
        ></view>
      </view>

      <view class="content-item tn-flex-center-start tn-margin-top-sm">
        <view class="tn-col-3">手机号</view>
        <view class="tn-flex-5"
          ><tn-input
            class="address-input"
            type="number"
            v-model="formParams.mobile"
            placeholder="手机号"
          ></tn-input
        ></view>
      </view>
      <view class="content-item tn-flex-center-start tn-margin-top-sm">
        <view class="tn-col-3">省市区</view>
        <view class="tn-flex-1">
          <options-list icon="" @click="regionPicker = true">{{
            formParams.areaName
          }}</options-list>
        </view>
      </view>

      <view class="content-item tn-flex-center-start tn-margin-top-sm">
        <view class="tn-col-3">详细地址</view>
        <view class="tn-flex-1"
          ><tn-input
            class="address-input"
            v-model="formParams.address"
            placeholder="请输入详细地址"
          ></tn-input
        ></view>
      </view>

      <view class="content-item tn-flex-center-start tn-margin-top-sm">
        <view class="tn-col-3">设置为默认</view>
        <view class="tn-flex-1"><tn-switch v-model="isDef"></tn-switch></view>
      </view>
    </view>
    <tn-picker
      v-model="regionPicker"
      mode="region"
      :default-value="defAreaId"
      @confirm="confirmArea"
    ></tn-picker>
    <view class="address-tool"
      ><view class="address-tool-del" v-if="isEdit">删除</view
      ><view class="address-tool-save tn-bg-main" @click="save"> 保存</view>
    </view>
  </view>

  <tn-toast ref="toast"></tn-toast>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnInput from "@/tuniao-ui/components/tn-input/src/Input.vue";
import TnButton from "@/tuniao-ui/components/tn-button/src/Button.vue";
import TnPicker from "@/tuniao-ui/components/tn-picker/src/Picker.vue";
import TnToast from "@/tuniao-ui/components/tn-toast/src/Toast.vue";
import { navBack } from "@/tuniao-ui/utils";
import OptionsList from "@/components/components-option-list/index.vue";
import TnSwitch from "@/tuniao-ui/components/tn-switch/src/Switch.vue";
import { saveAddress, updateAddress, deleteAddress } from "@/api/address";
import { ResultEnum } from "@/enums/httpEnum";
import { onLoad } from "@dcloudio/uni-app";

const toast = ref<InstanceType<typeof TnToast>>();
const formParams = reactive({
  id: null,
  memberId: null,
  areaId: null,
  areaName: "请选择地区",
  address: "",
  name: "",
  mobile: "",
  isDef: 0,
});

// 是否是编辑状态
const isEdit = ref<boolean>(false);
const navbarTitle = ref("添加地址");
const regionPicker = ref<boolean>(false);
// switch值 是否默认
const isDef = ref<boolean>(false);

const defAreaId = ref<string[]>();

function confirmArea(e) {
  let areaName = e.province.label + "-" + e.city.label + "-" + e.area.label;
  formParams.areaName = areaName;
  formParams.areaId = e.area.value;
  console.log("选择地区：", e);
}

async function save() {
  if (formParams.name === "") {
    toast.value?.show({
      title: "请填写姓名",
    });
    return;
  }
  if (formParams.mobile === "") {
    toast.value?.show({
      title: "请填写手机号",
    });
    return;
  }
  if (formParams.areaId === null) {
    toast.value?.show({
      title: "请选择地区",
    });
    return;
  }
  if (formParams.address === "") {
    toast.value?.show({
      title: "请填写详细地址",
    });
    return;
  }
  if (formParams.mobile.length < 11) {
    toast.value?.show({
      title: "手机号长度不对",
    });
    return;
  }
  // 如果勾选默认
  if (isDef.value) {
    formParams.isDef = 1;
  }
  console.log("表单内容：", formParams);

  let response;
  // 如果是编辑
  if (isEdit.value) {
    response = await updateAddress(formParams);
  } else {
    response = await saveAddress(formParams);
  }
  console.log(response);
  const { message: msg, code } = response;
  if (code === ResultEnum.SUCCESS) {
      toast.value?.show({
        title: "保存成功",
      });
      setTimeout(function () {
        navBack();
      }, 2000);
    } else {
      toast.value?.show({
        title: "保存失败",
      });
    }
}
onLoad((options: any) => {
  if (options.addressInfo) {
    let addressInfo = JSON.parse(decodeURIComponent(options.addressInfo));
    Object.assign(formParams, addressInfo);
    // 如果是默认
    if (addressInfo.isDef === 1) {
      isDef.value = true;
    }
    // 如果id存在 就是编辑，错误数据就不是
    if (addressInfo.id) {
      isEdit.value = true;
      navbarTitle.value = "修改地址";
     
      let areaStr = String(addressInfo.areaId);
      // 按照规则 组成需要的数组 id前两位代表省 前四位代表市， 整个6位代表区
      let provinceId = areaStr[0] + areaStr[1];
      let cityId = provinceId + areaStr[2] + areaStr[3];
      
      defAreaId.value = [provinceId,cityId,areaStr];
    }
  }
});
</script>
<style lang="scss" scoped>
body {
  background-color: #fff;
}
.address {
  background-color: #fff;
}
.content {
  margin-top: 30rpx;
  padding: 0 20rpx;
  &-item {
    height: 120rpx;
    padding-bottom: 50rpx;
  }
}

.address-input {
  border-bottom: 1px solid #ccc;
}
.address-tool {
  height: 100rpx;
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;

  &-del,
  &-save {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
  }
}
</style>
